<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逍遥时间的网站</title>
    <link rel="stylesheet" href="./style/global.css">
    <link rel="stylesheet" href="./style/game.css">
    <link rel="stylesheet" href="./style/index.css">
    <mate name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"></mate>
    <meta name="application-name" content="逍遥时间的网站,水墨风博客">
    <meta name="author" content="逍遥时间">
    <meta name="description" content="一款静态水墨风博客,游戏博客,个人的作品展示">
    <meta name="keywords" content="html,css,js,博客,水墨,水墨风,作品,游戏,静态">


    <style>
        #app div {
            text-align: center;
        }

        .app-body > div {
            height: 80vh;
        }


        @media screen and (max-width: 1000px) {
            .app-body > div {
                height: 40vh;
            }
        }

    </style>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?c82718612b38d3ac7044b10df3f9aec0";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body>
<div id="app">
    <div class="head-div">
        <iframe src="component/Head.html" class="head"></iframe>
    </div>
    <div>

    </div>
    <div class="app-body">
        <div class="who">
            <div class="who-font"><img src="images/whofont.png" alt=""></div>
            <div>逍遥~时间</div>
            <div>一个沉迷计算机的人</div>
        </div>
        <div class="html-what" id="html-what">
            <div>
                <img style="width: 80%" id="html-what-img" src="images/html-want1.png">
            </div>
        </div>
        <div class="html-audio">
            <button class="play-audio" onclick="playAudio()">播放音乐</button>
        </div>
        <div class="html-game" id="game" onclick="wavingClick()">
            <div id="game-who">为什么网页不能打游戏呢</div>
            <div id="game-score">当前分数:
                <span id="score">0</span>
            </div>
            <div id="game-over">游戏结束</div>
            <button id="game-start" onclick="newGame()">点我开始</button>
            <canvas id="canvas-game">

            </canvas>
        </div>

        <div class="understanding">
            <div>那你感觉, 网站是什么?</div>
        </div>
    </div>
</div>
<div>
    <iframe src="component/Footer.html" class="footer"></iframe>
</div>
<img class="left-background" src="images/zhu.png"></img>
<img class="left-background-2" src="images/zhu3.png"></img>
<img class="right-background" src="images/zhu2.png"></img>
</body>
<script src="script/gameControl.js"></script>
<script>
    new Image().src = "images/html-want2.png";

    function getOffsetLeft(dom) {
        let offsetTop = 0;
        do {
            console.log(dom, dom.offsetTop)
            offsetTop += dom.offsetTop
            dom = dom.parentNode
        } while (dom.parentNode)

        return offsetTop

    }

    let htmlWhatTopDistance = document.getElementById("html-what").offsetTop;
    window.onscroll = function () {
        let t = document.documentElement.scrollTop || document.body.scrollTop;
        if (t > htmlWhatTopDistance) {
            document.getElementById("html-what-img").src = "images/html-want2.png";
        }
    }
</script>
</html>